import React, { CSSProperties,useState,useEffect } from 'react';
import {Link, useRequest} from 'umi';
import {Row, Col, Card, List, message, Space, Button, Avatar, Tag,Spin} from 'antd';
import { FileTextOutlined } from '@ant-design/icons';

import { NumberCardList } from '@/components/NumberCard';

import {
    GetindexBannerListRequest, GetLatestKnowledgeRequest, GetRecommendationListRequest,
    GetroupStatisticsByKnowledgeTypeRequest,
    getTypes1,
    getTypes2,
} from './service';

import styles from './index.less';
import {uniqueId} from "lodash";
import {getAuthorStr1} from "@/utils/func";
import {getClassificationListDataToCode} from "@/pages/Dashboard/Knowledge/service";
import CommonIconFont from "@/components/CommonIconFont";
// const style: React.CSSProperties = { background: '#0092ff', padding: '8px 0' };
const Home: React.FC = () => {
    return (
        <div className={styles.wrapper}>
            <section style={{ marginBottom: 20 }}>
                <NumberCardListComp />
            </section>
            <section>
                <Row gutter={[18, 18]} className={styles.typeWrapper}>
                    <Col span={8}>
                        <YwtxCardComp/>
                    </Col>
                    <Col span={8}>
                        <JstxCardComp/>
                    </Col>
                    <Col span={8}>
                        <CptxCardComp/>
                    </Col>
                </Row>
            </section>
            <section style={{ marginBottom: 20 }}>
                <BannerList />
            </section>
            <section>
                <Row gutter={[12, 12]} className={styles.knowledgeWrapper}>
                    <Col span={12}>
                        <RecommendationList
                            title="系统推荐"
                            titleStyle={{
                                color: '#F2774B',
                            }}
                        />
                    </Col>
                    <Col span={12}>
                        <LatestKnowledgeList
                            title="最新上传"
                            titleStyle={{
                                color: '#1CA39C',
                            }}
                        />
                    </Col>
                </Row>
            </section>
        </div>
    );
};

const NumberCardListComp = () => {
    // const { data, error, loading } = useRequest(getTypeCount);
    const [ data,setData ] = useState<AircasHome.GetroupStatisticsByKnowledgeTypeResponse[]>()
    const [ loading,setLoading ] = useState(false);

    const GetroupStatisticsByKnowledgeType = async () => {
        setLoading(true);
        const res:AircasKB.ResponseType<AircasHome.GetroupStatisticsByKnowledgeTypeResponse[]>
            = await GetroupStatisticsByKnowledgeTypeRequest();
        if(res.code == 200){
            setData(res.data);
        }
        setLoading(false);
    }

    useEffect(()=>{
        GetroupStatisticsByKnowledgeType();
    },[])


    if (loading) {
        // return <Skeleton.Input active={true} block={true}/>
        return  <Spin/>
    }

    return (
        <NumberCardList data={data ?? []} />
    )
};

//业务体系
const YwtxCardComp = () => {
    const [ loading,setLoading ] = useState(false);
    const [ data,setData ] = useState<AircasKB.Knowledge.classificationListResponse[]>([]);

    const getClassificationListToCode = async () => {
        setLoading(true);
        const res:AircasKB.ResponseType<AircasKB.Knowledge.classificationListResponse[]> = await getClassificationListDataToCode({
            code:"0001",
            type:"0"
        })
        if(res.code == 200){
            setData(res.data);
        }
        setLoading(false);
    }

    useEffect(()=>{
        getClassificationListToCode();
    },[])

    if (loading) {
        return <Spin />;
    }
    else{
        return (
            <div className={styles.YylyContainer}>
                <div className={styles.icon_bg}>
                    <img className={styles.img} src={require('@public/images/box1.png')}/>
                </div>
                <div className={styles.title}>业务体系</div>

                <div className={styles.classContainer}>
                    <Space size={[9, 8]} wrap>
                        {
                            data && data.map((item,index)=>{
                                return(
                                    <div key={uniqueId()}>
                                        <Button key={uniqueId()} type="text">
                                            <Link to={`/knowledge/${item.code}`}> {item.name}</Link>
                                        </Button>
                                        <span key={uniqueId()}>{ index !=0 && (index%2) == 0 ? '' : '|'}</span>
                                    </div>
                                )

                            })
                        }
                    </Space>
                </div>
            </div>
        )
    }
}

//技术体系
const JstxCardComp = () => {


    const [ loading,setLoading ] = useState(false);
    const [ data,setData ] = useState<AircasKB.Knowledge.classificationListResponse[]>([]);

    const getClassificationListToCode = async () => {
        setLoading(true);
        const res:AircasKB.ResponseType<AircasKB.Knowledge.classificationListResponse[]> = await getClassificationListDataToCode({
            code:"0002",
            type:"0"
        })
        if(res.code == 200){
            setData(res.data);
        }
        setLoading(false);
    }

    useEffect(()=>{
        getClassificationListToCode();
    },[])

    if (loading) {
        return <Spin />;
    }
    else{
        return (
            <div className={styles.JxtxContainer}>
                <div className={styles.icon_bg}>
                    <img className={styles.img} src={require('@public/images/folder-minus.png')}/>
                </div>
                <div className={styles.title}>技术体系</div>
                <div className={styles.classContainer}>
                    <Space size={[9,8]} wrap>
                        {
                            data && data.map((item,index)=>{
                                return(
                                    <div key={uniqueId()}>
                                        <Button key={item.code} type="text" style={{paddingLeft:5,paddingRight:5}}>
                                            <Link to={`/knowledge/${item.code}`}> {item.name}</Link>
                                        </Button>
                                        <span key={uniqueId()}>{ index !=0 && (index%4) == 0 ? '' : '|'}</span>
                                    </div>
                                )

                            })
                        }
                    </Space>
                </div>
            </div>
        )
    }
}

//产品体系
const CptxCardComp = () => {
    const [ loading,setLoading ] = useState(false);
    const [ data,setData ] = useState<AircasKB.Knowledge.classificationListResponse[]>([]);

    const getClassificationListToCode = async () => {
        setLoading(true);
        const res:AircasKB.ResponseType<AircasKB.Knowledge.classificationListResponse[]> = await getClassificationListDataToCode({
            code:"0003",
            type:"0"
        })
        if(res.code == 200){
            setData(res.data);
        }
        setLoading(false);
    }

    useEffect(()=>{
        getClassificationListToCode();
    },[])
    if (loading) {
        return <Spin />;
    }
    else{
        return (
            <div className={styles.CptxContainer}>
                <div className={styles.icon_bg}>
                    <img className={styles.img} src={require('@public/images/database.png')}/>
                </div>
                <div className={styles.title}>产品体系</div>
                <div className={styles.classContainer}>
                    <Space size={[9, 8]} wrap>
                        {
                            data && data.map((item,index)=>{
                                return(
                                    <div  key={uniqueId()}>
                                        <Button key={item.id} type="text">
                                            <Link to={`/knowledge/${item.code}`}> {item.name}</Link>
                                        </Button>
                                        <span key={uniqueId()}>{ index !=0 && (index%2) == 0 ? '' : '|'}</span>
                                    </div>
                                )

                            })
                        }
                    </Space>
                </div>
            </div>
        )
    }
}

// @ts-ignore
const Type1CardComp = () => {
    const { data, error, loading } = useRequest(getTypes1);
    if (loading) {
        return <Spin />;
    }
    if (error) {
        message.error(error);
    }
    return (
        <Card
            size="small"
            title="应用领域"
            className={styles.typeCard}
            bodyStyle={{ height: 265, padding: 5, overflowX: 'hidden' }}
        >
            <List
                dataSource={data}
                renderItem={(item) => (
                    <List.Item>
                        <Space>
                            <p>{item.name}</p>
                            {item.children.map((v: any, i: number) => {
                                return (
                                    <span key={i}>
                                        <a>{v}</a>
                                    </span>
                                );
                            })}
                        </Space>
                    </List.Item>
                )}
            />
        </Card>
    );
};

// @ts-ignore
const Type2CardComp = () => {
    const { data, error, loading } = useRequest(getTypes2);
    if (loading) {
        return <Spin />;
    }
    if (error) {
        message.error(error);
    }
    return (
        <Card
            size="small"
            title="技术体系"
            className={styles.typeCard}
            bodyStyle={{ height: 265, padding: 5, overflowX: 'hidden' }}
        >
            <List
                dataSource={data}
                renderItem={(item) => (
                    <List.Item>
                        <Space>
                            <p>{item.name}</p>
                            {item.children.map((v: any, i: number) => {
                                return (
                                    <span key={i}>
                                        <a>{v}</a>
                                    </span>
                                );
                            })}
                        </Space>
                    </List.Item>
                )}
            />
        </Card>
    );
};

const BannerList = () => {
    const [ data,setData ] = useState<AircasHome.GetindexBannerListResponse[]>([]);
    const [ loading,setLoading ] = useState(false);

    const GetindexBannerList = async () => {
        setLoading(true);
        const res:AircasKB.ResponseType<AircasHome.GetindexBannerListResponse[]> = await GetindexBannerListRequest();
        if(res.code == 200){
            setData(res.data);
        }
        setLoading(false);
    }

    useEffect(()=>{
        GetindexBannerList();
    },[])

    if(loading){
        return (
            <Spin />
        )
    }
    else{
        return (
            <div className={styles.banners}>
                {data.map((item) => {
                    return (
                        <div
                            key={uniqueId()}
                            className={styles.item}
                            style={{
                                backgroundSize:"cover",
                                backgroundImage: item.banner
                                    ? `url(${item.banner})`
                                    : 'unset',
                            }}
                        >
                            <Link target="_blank" to={`/knowledge/details/${item.knowledgeId}`}>
                                <div className={styles.title}>
                                    {item.title}
                                </div>
                            </Link>
                        </div>
                    );
                })}
            </div>
        );
    }
};

const RecommendationList = ({
                                title,
                                titleStyle,
                                filter,
                            }: {
    title: string;
    titleStyle?: CSSProperties;
    filter?: any;//判断类型；1：系统推荐；2：最新下载
}) => {

    const [ data,setData ] = useState<AircasHome.GetRecommendationListResponse[]>([]);
    const [ loading,setLoading ] = useState(false);

    const GetRecommendationList = async (type:string) => {
        setLoading(true);
        const res:AircasKB.ResponseType<AircasHome.GetRecommendationListResponse[]> = await GetRecommendationListRequest();
        if(res.code == 200){
            // @ts-ignore
            setData(res.data);
        }
        setLoading(false);
    }

    useEffect(()=>{
        GetRecommendationList(filter);
    },[])

    return (
        <Card
            bordered={false}
            title={<span style={{ ...titleStyle }}>{title}</span>}
            bodyStyle={{ padding: 5 }}
            extra={
                <Button size="small" type="link" className={styles.moreBtn}>
                    <Link to={`/knowledge`}> 更多&nbsp;&gt;&gt;</Link>
                </Button>
            }
        >
            <List
                style={{
                    height: '630px',
                    overflow:'auto'
                }}
                loading={loading}
                itemLayout="horizontal"
                dataSource={data}
                renderItem={(item:AircasHome.GetRecommendationListResponse) => (
                    <List.Item>
                        <List.Item.Meta
                            avatar={
                                <a>
                                    <FileTextOutlined />
                                </a>
                            }
                            title={
                                <Button size="small" type="link">
                                    <Link target="_blank" to={`/knowledge/details/${item.knowledgeId}`}>{item.knowledgeTitle}</Link>&nbsp;&nbsp;<Tag color="lime" key={uniqueId()}>{item.knowledgeTypeName}</Tag>
                                </Button>
                            }
                            description={
                                <Space>
                                    {item.authorViews && item.authorViews?.length >0 && <Avatar src={item.authorViews?.[0].icon || 'https://joeschmoe.io/api/v1/random'}
                                                                                                icon={
                                                                                                    <CommonIconFont
                                                                                                        // @ts-ignore
                                                                                                        type={`aircaskb-touxiang`}
                                                                                                        style={{ fontSize: 24 }}
                                                                                                    />
                                                                                                }
                                                                                                size="small" />}
                                    <a>{getAuthorStr1({value:item.authorViews})}</a>
                                    <span>{item?.date}</span>
                                    <span>浏览人数：{item?.knowledgeUv}</span>
                                </Space>
                            }
                        />
                    </List.Item>
                )}
            />
        </Card>
    );
};


const LatestKnowledgeList = ({
                                 title,
                                 titleStyle,
                                 filter,
                             }: {
    title: string;
    titleStyle?: CSSProperties;
    filter?: any;//判断类型；1：系统推荐；2：最新下载
}) => {

    const [ data,setData ] = useState<AircasHome.GetLatestKnowledgeResponse[]>([]);
    const [ loading,setLoading ] = useState(false);

    const GetLatestKnowledgeList = async (type:string) => {
        setLoading(true);
        const res:AircasKB.ResponseType<AircasHome.GetLatestKnowledgeResponse[]> = await GetLatestKnowledgeRequest();
        if(res.code == 200){
            // @ts-ignore
            setData(res.data);
        }
        setLoading(false);
    }

    useEffect(()=>{
        GetLatestKnowledgeList(filter);
    },[])

    return (
        <Card
            bordered={false}
            title={<span style={{ ...titleStyle }}>{title}</span>}
            bodyStyle={{ padding: 5 }}
            extra={
                <Button size="small" type="link" className={styles.moreBtn}>
                    <Link to={`/knowledge`}> 更多&nbsp;&gt;&gt;</Link>
                </Button>
            }
        >
            <List
                loading={loading}
                style={{
                    height: '630px',
                    overflow:'auto'
                }}
                itemLayout="horizontal"
                dataSource={data}
                renderItem={(item: AircasHome.GetLatestKnowledgeResponse) => (
                    <List.Item>
                        <List.Item.Meta
                            avatar={
                                <a>
                                    <FileTextOutlined />
                                </a>
                            }
                            title={
                                <Button size="small" type="link">
                                    <Link target="_blank" to={`/knowledge/details/${item.id}`}>{item.title}</Link>&nbsp;&nbsp;<Tag color="lime" key={uniqueId()}>{item.typeName}</Tag>
                                </Button>
                            }
                            description={
                                <Space>
                                    {item.authors && item.authors?.length >0 && <Avatar src={item.authors?.[0].icon || 'https://joeschmoe.io/api/v1/random'}
                                                                        icon={
                                                                            <CommonIconFont
                                                                                // @ts-ignore
                                                                                type={`aircaskb-touxiang`}
                                                                                style={{ fontSize: 24 }}
                                                                            />
                                                                        }
                                                                        size="small" />}
                                    <a>{getAuthorStr1({value:item.authors})}</a>
                                    <span>{item?.date}</span>
                                    <span>浏览人数：{item?.uv}</span>
                                </Space>
                            }
                        />
                    </List.Item>
                )}
            />
        </Card>
    );
};

export default Home;
